<template>
  <div>
    <!-- 值班操作主子运单 2018/8/27 zuoW -->
    <Row>
      <i-col>
        <Form ref="tabParamForm" :model="tabParam" label-position="right" inline>
          <FormItem label="对位日期：">
            <DatePicker v-model="datePicker.timeVal" type="daterange" :options="datePicker.options" split-panels
              placeholder="对位日期" format="yyyy年MM月dd日" style="width: 230px"></DatePicker>
          </FormItem>

          <FormItem label="箱号：">
            <Input type="text" v-model="tabParam.containerNo" clearable placeholder="集装箱号"></Input>
          </FormItem>

          <FormItem label="送货地址">
            <Select v-model="tabParam.shippingAddress" placeholder="请选择送货地址" style="width: 200px" clearable>
              <Option v-for="item in addressList" :value="item.address" :key="item.address">{{ item.address }}</Option>
            </Select>
          </FormItem>

          <FormItem label="发货站：">
            <Input type="text" v-model="tabParam.startStationName" placeholder="发站" clearable></Input>
          </FormItem>

          <FormItem label="操作员：">
            <Input type="text" v-model="tabParam.dutyUser" placeholder="操作员" clearable></Input>
          </FormItem>

          <FormItem label="补录员：">
            <Input type="text" v-model="tabParam.recordUser" placeholder="补录员" clearable></Input>
          </FormItem>

          <FormItem label="主运单号：">
            <Input type="text" v-model="tabParam.mainOrderNo" placeholder="主运单号" clearable></Input>
          </FormItem>

          <FormItem label="车队">
            <Select v-model="tabParam.fleetId" placeholder="请选择车队" style="width: 200px" clearable>
              <Option v-for="item in fleetList" :value="item.id" :key="item.login_name">{{ item.login_name }}</Option>
            </Select>
          </FormItem>

          <FormItem label="操作日期：">
            <DatePicker v-model="datePicker.timeValOptionTime" type="daterange" :options="datePicker.options" split-panels
              placeholder="对位日期" format="yyyy年MM月dd日" style="width: 230px"></DatePicker>
          </FormItem>

          <FormItem label="补录日期：">
            <DatePicker v-model="datePicker.timeValRecordTime" type="daterange" :options="datePicker.options" split-panels
              placeholder="对位日期" format="yyyy年MM月dd日" style="width: 230px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" icon="ios-search" @click="handelSearch">
              筛选
            </Button>
            <Button type="primary" icon="ios-download-outline" @click="exportDataInventory">
              一键导出
            </Button>
          </FormItem>
        </Form>
      </i-col>
    </Row>
    <Row>
      <i-col span="24">
        <!--子运单-->
        <tablePage ref="inspectionTabSubOrder" :api="dutyGetSubOrder" :param="tabParam" :isStartLoad="true" sort-name="endStationTime" sort-type="desc">
          <template slot-scope="props">
            <Table ref="subOrdertableList" :columns="subOrderColumn" :data="props.data" @on-sort-change="props.sortChange" border></Table>
          </template>
        </tablePage>

      </i-col>
    </Row>
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import {getUserAddressInfo} from '@/api/backEnd/userAddress'
  import {dutyGetSubOrder, getOwnFleet} from '@api/backEnd/station'
  import moment from 'moment'
  import {exportUtil} from '@/vendor/exportInvoke'

  export default {
    name: 'orderListInspection',
    data () {
      /* 子运单 */
      let subOrderColumn = [
        {
          title: '联运单号',
          key: 'orderNo',
          width: 200
        },
        {
          title: '货票号',
          key: 'waybillNo',
          width: 120
        },
        {
          title: '对位时间',
          key: 'paraPositionTime',
          width: 200,
          render: (h, params) => {
            let thisdata = params.row.paraPositionTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '发货站',
          key: 'startStationName',
          width: 100
        },
        {
          title: '送货地址',
          key: 'shippingAddress',
          width: 150
        },
        {
          title: '箱号',
          key: 'containerNoBody',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.containerNoHead + params.row.containerNoBody
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '车号',
          key: 'truckPlate',
          width: 180
        },
        {
          title: '车队',
          key: 'fleetName',
          width: 180
        },
        {
          title: '提煤单号',
          key: 'coalNo',
          width: 180
        },
        {
          title: '值班员',
          key: 'dutyUser',
          width: 180
        },
        {
          title: '操作时间',
          key: 'optionTime',
          width: 200,
          render: (h, params) => {
            let thisdata = params.row.optionTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '毛重',
          width: 180,
          key: 'grossWeight'
        },
        {
          title: '皮重',
          width: 180,
          key: 'tareWeight'
        },
        {
          title: '净重',
          width: 180,
          key: 'netWeight'
        },
        {
          title: '流水号',
          width: 180,
          key: 'poundNo'
        },
        {
          title: '补录员',
          key: 'recordUser',
          width: 180
        },
        {
          title: '补录时间',
          key: 'recordTime',
          width: 200,
          render: (h, params) => {
            let thisdata = params.row.recordTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        }
      ]
      let tabParam = {
        startStationName: '',
        containerNo: '',
        containerNoHead: '',
        containerNoBody: '',
        shippingAddress: '',
        dutyUser: '',
        recordUser: '',
        mainOrderNo: '',
        fleetId: '',
        coalState: 1
      }
      let addressList = []
      let fleetList = []
      let datePicker = {
        timeVal: ['', ''],
        timeValOptionTime: ['', ''],
        timeValRecordTime: ['', ''],
        options: {
          shortcuts: [
            {
              text: '最近一周 ',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        }
      }
      let datas = {
        datePicker,
        dutyGetSubOrder,
        tabParam,
        subOrderColumn,
        addressList,
        fleetList
      }
      return datas
    },
    computed: {},
    methods: {
      handelSearch () {
        delete this.tabParam.startParaPositionTime
        delete this.tabParam.endParaPositionTime
        delete this.tabParam.containerNoHead
        delete this.tabParam.containerNoBody
        if (this.datePicker.timeVal[1] && this.datePicker.timeVal[0]) {
          this.tabParam.startParaPositionTime = moment(this.datePicker.timeVal[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.endParaPositionTime = moment(this.datePicker.timeVal[1]).format('YYYY-MM-DD') + ' 23:59:59'
        }
        if (this.datePicker.timeValOptionTime[1] && this.datePicker.timeValOptionTime[0]) {
          this.tabParam.startOptionTime = moment(this.datePicker.timeValOptionTime[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.endOptionTime = moment(this.datePicker.timeValOptionTime[1]).format('YYYY-MM-DD') + ' 23:59:59'
        }
        if (this.datePicker.timeValRecordTime[1] && this.datePicker.timeValRecordTime[0]) {
          this.tabParam.startRecordTime = moment(this.datePicker.timeValRecordTime[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.endRecordTime = moment(this.datePicker.timeValRecordTime[1]).format('YYYY-MM-DD') + ' 23:59:59'
        }
        let containerReg = /^[a-zA-Z]{4}[0-9]{7}$/
        if (this.tabParam.containerNo) {
          if (containerReg.test(this.tabParam.containerNo)) {
            this.tabParam.containerNoHead = this.tabParam.containerNo.substring(0, 4)
            this.tabParam.containerNoBody = this.tabParam.containerNo.substring(4, 11)
          } else {
            this.$Message.error('请输入正取的箱号')
          }
        }
        this.$refs['inspectionTabSubOrder'].dataRefresh()
      },
      getAddress () {
        let param = {
          pageIndex: 1,
          pageSize: 1000
        }
        getUserAddressInfo(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.addressList = res.data.data.rows
          }
        })
        getOwnFleet().then(res => {
          if (res.data.isSuccess === 1) {
            let fleets = res.data.data
            this.fleetList = fleets
          }
        })
      },
      exportDataInventory () {
        let param = Object.assign({}, this.tabParam)
        param.pageNumber = 1
        param.pageSize = 0
        dutyGetSubOrder(param).then(res => {
          if (res.data.isSuccess === 1) {
            let resDate = res.data.data.rows
            let result = this.fasetJson(resDate)
            exportUtil.export2Excel('值班统计', result.columns, result.data)
          }
        })
      },
      fasetJson (tabData) {
        let result = {
          columns: [
            {title: '联运单号', key: 'orderNo'},
            {title: '货票号', key: 'waybillNo'},
            {title: '对位时间', key: 'paraPositionTime'},
            {title: '发货站', key: 'startStationName'},
            {title: '送货地址', key: 'shippingAddress'},
            {title: '箱号', key: 'containerNo'},
            {title: '车号', key: 'truckPlate'},
            {title: '车队', key: 'fleetName'},
            {title: '提煤单号', key: 'coalNo'},
            {title: '值班员', key: 'dutyUser'},
            {title: '操作时间', key: 'optionTime'},
            {title: '毛重', key: 'grossWeight'},
            {title: '皮重', key: 'tareWeight'},
            {title: '净重', key: 'netWeight'},
            {title: '流水号', key: 'poundNo'},
            {title: '补录员', key: 'recordUser'},
            {title: '补录时间', key: 'recordTime'}
          ],
          data: []
        }
        let indexCount = 0
        tabData.forEach((item) => {
          item.containerNo = item.containerNoHead + item.containerNoBody
          let dataItem = {
            orderNo: item.orderNo,
            waybillNo: item.waybillNo,
            paraPositionTime: item.paraPositionTime,
            startStationName: item.startStationName,
            shippingAddress: item.shippingAddress,
            containerNo: item.containerNo,
            truckPlate: item.truckPlate,
            fleetName: item.fleetName,
            coalNo: item.coalNo,
            dutyUser: item.dutyUser,
            optionTime: item.optionTime,
            grossWeight: item.grossWeight,
            tareWeight: item.tareWeight,
            netWeight: item.netWeight,
            poundNo: item.poundNo,
            recordUser: item.recordUser,
            recordTime: item.recordTime
          }
          result.data.push(dataItem)
          indexCount++
        })
        console.log(indexCount)
        return result
      }
    },
    created () {
    },
    mounted () {
      this.getAddress()
    },
    watch: {},
    components: {
      tablePage
    }
  }
</script>

<style scoped>

</style>
